

<template>
  <Header></Header>
  <div class="details">
    <div>
      <img :src="img">
    </div>
    <div class="page-layout">
      <Sidebar @sidebar-click="handleSidebarClick">
        <template #title>
          <span>智算中心</span>
        </template>
      </Sidebar>
      <div class="main-content">
        <!-- 首页内容 -->
        <div class="content-section" :class="activeKey===0 && 'active'" id="home">
          <h2 class="page-title">智算中心</h2>
          <p class="page-subtitle">提供强大的计算能力和算法支持，赋能企业数字化转型与智能化升级</p>

          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="智算中心" class="intro-image">

          <div class="content-text">
            <p>智算中心是创新服务平台的核心计算基础设施，集成了高性能计算集群、人工智能训练平台和大数据分析系统，为企业、科研机构和政府部门提供强大的计算能力支持。</p>
            <p>中心拥有超过10PFlops的计算能力，配备最新的GPU和TPU加速卡，支持大规模并行计算和深度学习训练任务。我们的专业团队将为您提供全方位的技术支持，帮助您充分利用计算资源。</p>
          </div>

          <h3>核心能力</h3>
          <div class="feature-grid">
            <div class="feature-card">
              <h3>高性能计算</h3>
              <p>提供超算级别的计算能力，支持大规模科学计算、工程仿真和数值模拟。</p>
            </div>

            <div class="feature-card">
              <h3>AI训练平台</h3>
              <p>专为深度学习优化的训练平台，支持主流框架，加速AI模型开发流程。</p>
            </div>

            <div class="feature-card">
              <h3>大数据分析</h3>
              <p>处理PB级数据的能力，提供数据清洗、分析和可视化工具。</p>
            </div>
          </div>
        </div>

        <!-- 建设概况内容 -->
        <div class="content-section" :class="activeKey===1 && 'active'" id="construction">
          <h2 class="page-title">建设概况</h2>
          <p class="page-subtitle">智算中心的发展历程与建设成果</p>

          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="智算中心建设" class="intro-image">

          <div class="content-text">
            <p>智算中心于2023年启动建设，总投资5亿元人民币，占地面积5000平方米，是区域规模最大、计算能力最强的公共计算服务平台。</p>
            <p>中心采用模块化设计，分三期建设完成。一期工程于2024年投入使用，提供基础计算和存储能力；二期工程于2024年底完成，增强了AI训练和大数据分析能力；三期工程将于2025年底竣工，将引入量子计算等前沿技术。
            </p>
            <p>目前，智算中心已服务超过200家企业、50所高校和研究机构，累计完成计算任务超过10万项，有力支撑了区域科技创新和产业升级。</p>
          </div>

          <h3>基础设施</h3>
          <div class="feature-grid">
            <div class="feature-card">
              <h3>计算节点</h3>
              <p>200+计算节点，包含CPU、GPU和TPU多种架构，峰值计算能力达10PFlops</p>
            </div>

            <div class="feature-card">
              <h3>存储系统</h3>
              <p>全闪存存储架构，总容量20PB，支持高并发IO访问</p>
            </div>

            <div class="feature-card">
              <h3>网络系统<!--3-->
                <p>100Gbps高速互联网络，低延迟、高带宽的数据传输能力</p>
              </h3></div>
          </div>
        </div>

        <!-- 政策资讯内容 -->
        <div class="content-section" :class="activeKey===2 && 'active'" id="policy">
          <h2 class="page-title">政策资讯</h2>
          <p class="page-subtitle">关于智算中心的相关政策和支持措施</p>

          <div class="policy-list">
            <div class="policy-item">
              <h3>《关于支持智算中心发展的若干政策》</h3>
              <p>发布部门：市科技局、市发改委 | 发布时间：2025年3月15日</p>
              <p>该政策从资金支持、人才引进、税收优惠等方面提出了10条具体措施，支持智算中心建设和运营。</p>
              <a href="javascript:;">查看政策全文 →</a>
            </div>

            <div class="policy-item">
              <h3>《智算中心企业使用补贴管理办法》</h3>
              <p>发布部门：市工信局 | 发布时间：2025年5月20日</p>
              <p>办法明确了企业使用智算中心资源的补贴标准和申请流程，最高可获50%的计算费用补贴。</p>
              <a href="javascript:;">查看政策全文 →</a>
            </div>

            <div class="policy-item">
              <h3>《智算中心科研合作项目指南》</h3>
              <p>发布部门：市科技局 | 发布时间：2025年6月10日</p>
              <p>指南明确了智算中心与高校、科研机构的合作机制和项目申报流程，支持联合开展前沿技术研究。</p>
              <a href="javascript:;">查看政策全文 →</a>
            </div>
          </div>
        </div>

        <!-- 活动报道内容 -->
        <div class="content-section" :class="activeKey===3 && 'active'" id="activity">
          <h2 class="page-title">活动报道</h2>
          <p class="page-subtitle">智算中心相关活动与新闻报道</p>

          <div class="news-list">
            <div class="news-item">
              <div class="news-date">2025-07-15</div>
              <div class="news-content">
                <h3><a href="javascript:;">市委书记张伟考察智算中心</a></h3>
                <p>市委书记张伟一行莅临智算中心考察指导，详细了解中心建设运营情况，对中心在推动区域创新发展方面取得的成绩给予充分肯定。</p>
              </div>
            </div>

            <div class="news-item">
              <div class="news-date">2025-06-20</div>
              <div class="news-content">
                <h3><a href="javascript:;">智算中心二期工程正式启用</a></h3>
                <p>智算中心二期工程正式投入使用，新增AI训练和大数据分析能力，计算能力提升至10PFlops。</p>
              </div>
            </div>

            <div class="news-item">
              <div class="news-date">2025-05-12</div>
              <div class="news-content">
                <h3><a href="javascript:;">智算中心与5所高校签署合作协议</a></h3>
                <p>智算中心与本地5所重点高校签署战略合作协议，共建联合实验室，共享计算资源，共同培养高端计算人才。</p>
              </div>
            </div>

            <div class="news-item">
              <div class="news-date">2025-04-05</div>
              <div class="news-content">
                <h3><a href="javascript:;">智算中心首届开发者大会成功举办</a></h3>
                <p>智算中心首届开发者大会吸引了来自全国各地的500余名开发者参与，共同探讨智能计算技术的最新发展和应用实践。</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 服务介绍内容 -->
        <div class="content-section" :class="activeKey===4 && 'active'" id="service">
          <h2 class="page-title">服务介绍</h2>
          <p class="page-subtitle">智算中心提供的各类计算服务</p>

          <div class="service-list">
            <div class="service-item">
              <h3>高性能计算服务</h3>
              <div class="service-content">
                <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="高性能计算" class="service-image">
                <div class="service-text">
                  <p>提供超算级别的计算能力，支持大规模科学计算、工程仿真和数值模拟。我们的集群采用最新一代处理器和高速互联技术，可高效处理复杂的计算任务。</p>
                  <p>服务特点：支持MPI并行计算、提供多种科学计算软件、专业团队优化支持</p>
                  <p>适用领域：气象预测、分子模拟、流体力学、有限元分析等</p>
                </div>
              </div>
            </div>

            <div class="service-item">
              <h3>AI训练服务</h3>
              <div class="service-content">
                <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="AI训练" class="service-image">
                <div class="service-text">
                  <p>专为深度学习优化的训练平台，支持TensorFlow、PyTorch等主流框架。提供分布式训练、自动超参优化和模型管理功能，加速AI模型开发流程。</p>
                  <p>服务特点：多GPU节点训练、可视化训练监控、模型版本管理</p>
                  <p>适用领域：计算机视觉、自然语言处理、推荐系统等</p>
                </div>
              </div>
            </div>

            <div class="service-item">
              <h3>大数据分析服务</h3>
              <div class="service-content">
                <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="大数据分析" class="service-image">
                <div class="service-text">
                  <p>处理PB级数据的能力，支持Hadoop、Spark等大数据生态系统。提供数据清洗、分析和可视化工具，帮助用户从海量数据中提取有价值的信息。</p>
                  <p>服务特点：多种数据源接入、交互式分析环境、可视化仪表板</p>
                  <p>适用领域：用户行为分析、日志分析、商业智能等</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script setup>
import Header from '@/components/header/App.vue'
import Breadcrumb from '@/components/breadcrumb/App.vue'
import Sidebar from '@/components/sidebar/App.vue'
import Footer from '@/components/footer/App.vue'
import {ref} from "vue";
import img from '@/assets/img/static/fnpt_zszx.png'

const activeKey = ref(0)

const handleSidebarClick = ( key ) => {
  console.log( key );
  activeKey.value=key
}

</script>

<style scoped>
.details{
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.page-layout{
  display: flex;
  margin-top: 20px;
}
.main-content {
  flex: 1;
  background-color: white;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.content-section {
  display: none;
}

.content-section.active {
  display: block;
}

.page-title {
  font-size: 28px;
  margin-bottom: 20px;
  color: #1e5799;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f0f0;
}

.page-subtitle {
  font-size: 16px;
  color: #666;
  margin-bottom: 30px;
}

.intro-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.content-text {
  font-size: 16px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 20px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.feature-card {
  background-color: #f9fbff;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e0e9ff;
  transition: transform 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(30, 87, 153, 0.1);
}

.feature-card h3 {
  font-size: 18px;
  color: #1e5799;
  margin-bottom: 10px;
}

.feature-card p {
  font-size: 14px;
  color: #666;
}

.news-list {
  margin-top: 30px;
}

.news-item {
  display: flex;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px dashed #e0e9ff;
}

.news-date {
  width: 100px;
  color: #207cca;
  font-weight: bold;
}

.news-content {
  flex: 1;
}

.news-content h3 {
  font-size: 16px;
  margin-bottom: 5px;
}

.news-content p {
  color: #666;
  font-size: 14px;
}

.news-content a {
  color: #1e5799;
  text-decoration: none;
}

.news-content a:hover {
  text-decoration: underline;
}

.service-list {
  margin-top: 30px;
}

.service-item {
  margin-bottom: 30px;
}

.service-item h3 {
  font-size: 20px;
  color: #1e5799;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.service-content {
  display: flex;
  margin-bottom: 20px;
}

.service-image {
  width: 300px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 20px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.service-text {
  flex: 1;
  font-size: 15px;
  color: #555;
  line-height: 1.8;
}

.policy-list {
  margin-top: 30px;
}

.policy-item {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f9fbff;
  border-radius: 8px;
  border-left: 4px solid #207cca;
}

.policy-item h3 {
  font-size: 16px;
  margin-bottom: 10px;
  color: #1e5799;
}

.policy-item p {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.policy-item a {
  color: #207cca;
  text-decoration: none;
  font-size: 14px;
}
</style>